<template>
	<view>
		
		<view class="ranking-top">
			<view class="ranking-top1">
				<view class="top1-1">
					<image src="../static/no2.png" mode=""></image>
				</view>
				<view class="top1-2">
					<image :src="this.app[1].src" mode=""></image>
				</view>
				<view class="top1-3">
					<text>{{this.app[1].uname}}</text>
				</view>
				<view class="top1-4">
					<text>{{this.app[1].num}}</text>
				</view>
				<view class="top1-3">
					<text>已完成</text>
				</view>
			</view>
			<view class="ranking-top2">
				<view class="top2-1">
					<image src="../static/no1.png" mode=""></image>
				</view>
				<view class="top2-2">
					<image :src="this.app[0].src" mode=""></image>
				</view>
				<view class="top2-3">
					<text>{{this.app[0].uname}}</text>
				</view>
				<view class="top2-4">
					<text>{{this.app[0].num}}</text>
				</view>
				<view class="top2-3">
					<text>已完成</text>
				</view>
			</view>
			<view class="ranking-top1">
				<view class="top1-1">
					<image src="../static/no3.png" mode=""></image>
				</view>
				<view class="top1-2">
					<image :src="this.app[2].src" mode=""></image>
				</view>
				<view class="top1-3">
					<text>{{this.app[2].uname}}</text>
				</view>
				<view class="top1-4">
					<text>{{this.app[2].num}}</text>
				</view>
				<view class="top1-3">
					<text>已完成</text>
				</view>
			</view>
		</view>
		<view class="ranking-bottom" v-for="(item,index) in app" :key="index" v-if="item.id>=3">
			<view class="bottom-left">
				<text>{{item.id}}</text>
				
			</view>
			<view class="bottom-right">
				<view class="br-left">
						<view class="br-left1">
							<image :src="item.src" mode=""></image>
						</view>
						<view class="br-left2">
							<text>{{item.uname}}</text>
						</view>
				</view>
				<view class="br-right">
					<text>已完成<a href="#">{{item.num}}</a>单</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"ranking",
		data() {
			return {
				app:[
					{id:0,src:'../../static/ren-1.png',uname:'墨刀小莫',num:'2233'},
					{id:1,src:'../../static/ren-2.png',uname:'墨刀小莫',num:'1122'},
					{id:2,src:'../../static/ren-3.png',uname:'墨刀小莫',num:'999'},
					{id:3,src:'../../static/ren-1.png',uname:'李九',num:'238'},
					{id:4,src:'../../static/ren-3.png',uname:'王三',num:'111'},
					{id:5,src:'../../static/ren-2.png',uname:'张四',num:'100'},
					{id:6,src:'../../static/ren-1.png',uname:'冯七',num:'98'},
					{id:7,src:'../../static/ren-1.png',uname:'爱意',num:'90'},
					{id:8,src:'../../static/ren-3.png',uname:'张老九',num:'80'},
					{id:9,src:'../../static/ren-2.png',uname:'王五',num:'70'},
					{id:10,src:'../../static/ren-1.png',uname:'随风',num:'50'},
					{id:11,src:'../../static/ren-1.png',uname:'李四',num:'40'},
					{id:12,src:'../../static/ren-3.png',uname:'墨小',num:'20'},
					{id:13,src:'../../static/ren-2.png',uname:'墨莫',num:'6'},
					{id:14,src:'../../static/ren-1.png',uname:'墨小刀',num:'5'},
				]
			};
		},
		
	}
</script>

<style lang="scss" scoped>
	a{
		text-decoration: none;
	}
	.ranking-top{
				width: 100%;
				height: 170px;
				padding-bottom: 10px;
				background-color: #1252C3;
				// margin-top: 43px;
				display: flex;
				align-items: flex-end;
				    justify-content: center;
				.ranking-top1{
					width: 115px;
					height: 140px;
					background-color: #fff;
					display: flex;
					flex-direction: column;
					    align-items: center;
					    justify-content: center;
					.top1-1{
						width: 24px;
						height: 20px;
						image{
								width: 100%;
									height: 100%;
											 }
					}
					.top1-2{
											 width:50px;
											 height: 50px;
											 margin-top: -5px;
											 margin-bottom: 5px;
											 image{
												 width: 100%;
												 height: 100%;
											 }
					}
					.top1-3{
											 margin-bottom: 4px;
											 width: 100%;
											 height: 16px;
											text-align: center;
											color: #989898;
					}
					.top1-4{
											 margin-bottom: 4px;
											 width: 100%;
											 font-size: 18px;
											 height: 15px;
											 color: red;
											 text-align: center;
					}
				}
				.ranking-top2{
					width: 115px;
					height: 170px;
					background-color: #fff;
					 box-shadow: 0 0px 14px rgba(0, 0, 0, .3);
					 z-index: 2;
					 border-top-left-radius: 5px;
					 border-top-right-radius: 5px;
					 display: flex;
					 flex-direction: column;
					     align-items: center;
					     justify-content: center;
					 .top2-1{
						 width: 42px;
						 height: 28px;
						 image{
							 width: 100%;
							 height: 100%;
						 }
					 }
					 .top2-2{
						 width: 65px;
						 height: 65px;
						 margin-top: -5px;
						 margin-bottom: 5px;
						 image{
							 width: 100%;
							 height: 100%;
						 }
					 }
					 .top2-3{
						 margin-bottom: 4px;
						 width: 100%;
						 height: 16px;
						text-align: center;
						color: #989898;
					 }
					 .top2-4{
						 margin-bottom: 4px;
						 width: 100%;
						 height: 15px;
						 font-size: 18px;
						 color: red;
						 text-align: center;
					 }
					
				}
				
			}
			.ranking-top1:nth-child(1){
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
			}
			.ranking-top1:nth-child(3){
				border-bottom-right-radius: 5px;
				border-top-right-radius: 5px;
			}
			.ranking-bottom{
				width: 100%;
				height: 70px;
				padding-left: 20px;
				display: flex;
				.bottom-left{
					width: 5%;
					height: 45px;
					margin-right: 10px;
					padding-top: 25px;
					text-align: left;
					color: #989898;
				}
				.bottom-right{
					width: 85%;
					height: 70px;
					display: flex;
					align-items: center;
					    justify-content: space-between;
					border-bottom: 1px solid #989898;
					.br-left{
						min-width: 80px;
						height: 40px;
						display: flex;
						align-items: center;
						.br-left1{
							width: 40px;
							height: 40px;
							
							image{
								width: 100%;
								height: 100%;
							}
						}
							
						.br-left2{
							margin-left: 10px;
							min-width: 30px;
							height: 20px;
						}
					}
					.br-right{
						min-width: 70px;
						height: 25px;
						color: #989898;
						a{
							color: red;
						}
					}
				}
			}
</style>